<!--
 * @Author: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @Date: 2022-06-30 14:34:07
 * @LastEditors: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @LastEditTime: 2022-07-25 18:07:31
 * @FilePath: \大宗买卖\ebuy\src\views\Main\Supplier\supplier\Products\index.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by fengweicong 75202172+fengweicong@users.noreply.github.com, All Rights Reserved. 
-->
<template>
    <div class="supplyProducts">
        <el-card class="list">
            <div slot="header">
                <span class="title">供应产品</span>
                <!-- <el-button class="bt" type="text"><i class="el-icon-right"></i></el-button> -->
            </div>
            <div class="content clearfix">
                <div class="page" v-for="(product,index) in products" :key="index" @click="toProduct(product)">
                    <supplyProduct class="supplyProduct" :product="product"></supplyProduct>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import supplyProduct from './supplyProduct.vue'
import Paging from './paging.vue'
export default {
    name:'supplyProducts',
    components:{
        supplyProduct,
        Paging,
    },
    data() {
        return {
            currentPage:1,
            show_product_num:6,
            products: []
        }
    },
    methods: {
        toProduct(product) {
            this.$router.push({
                path: '/supplier/product',
                query: {
                    pid: product.id
                }
            })
        },
        showPage:function(index){
            if( (index + 1) == this.currentPage){
                return true
            }
            return false
        },
        setCurrentPage:function(page){
            this.currentPage = page
        }
    },
    computed:{
        sid() {
            return this.$store.state.supplier.supplier_id
        }
    },
    watch: {
        sid: {
            immediate: true,
            handler: async function(newVal, oldVal) {
                if (newVal) {
                    let pictures = []
                    await this.$API.getProductPhotos().then(res => {
                        if (res.status == 200) {
                            pictures = res.data
                            return this.$API.getSupply()
                        }
                    }).then(res => {
                        if (res.status == 200) {
                            for (let obj of res.data) {
                                if (obj.supplier_id == newVal) {
                                    for (let obj2 of pictures) {
                                        if (obj2.product_id == obj.id)
                                            obj['photo_url'] = obj2.photo_url
                                    }
                                    this.products.push(obj)
                                }
                            }
                        }
                    })
                }
            }
        }
    },
}
</script>

<style lang="less" scoped>
.title{
    color: @color-theme;
    font-size: 2rem;
}
.bt{
    float: right; 
    padding: 0;
    margin-left: 20px;
    font-size: 2rem;
}
.tips{
    color: @color-tips;
}
.list{
    padding: 20px 45px;
    .clearfix::after,
    .clearfix::before{
        display: table;
        content: '';
        clear: both;
    }
    .el-icon-right{
        float: right;
    }
    .content{
        margin: 0 auto;
        .supplyProduct{
            float: left;
            margin-right: 40px;
            margin-bottom: 10px;
        }
    }
}
</style>